<template>
  <view :style="[outModuleCss]">
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view
      class="market-countDown"
      :style="{ borderRadius: outModuleCss.borderRadius }"
    >
      <view class="countdown-img" @click="$utils.diySkip(propsData.params.link)">
        <image lazy-load :src="propsData.params.countDownImg" alt="" />
      </view>
      <view
        class="countdown-content"
        :style="[contentStyle]"
      >
        <view
          class="template-default"
          :style="{ justifyContent: propsData.params.justifyContent }"
          v-if="propsData.params.styleType == 1"
        >
          <h4 :style="[propsData.params.css]">{{$t('diy.start')}}:</h4>
          <view class="countDown-box">
            <p class="time-box" :style="[countDownBgColor]">
              <span :style="[countDownFontColor]">{{HH}}</span>
            </p>
            <p class="time-split" :style="[countDownFontColor]">:</p>
            <p class="time-box" :style="[countDownBgColor]">
              <span :style="[countDownFontColor]">{{MM}}</span>
            </p>
            <p class="time-split" :style="[countDownFontColor]">:</p>
            <p class="time-box" :style="[countDownBgColor]">
              <span :style="[[countDownFontColor]]">{{SS}}</span>
            </p>
          </view>
        </view>
        <view
          class="template-padding"
          :style="{ justifyContent: propsData.params.justifyContent }"
          v-if="propsData.params.styleType == 2"
        >
          <view class="template-box">
            <h4 :style="[propsData.params.css]">{{$t('diy.start')}}:</h4>
            <p class="time-box" :style="[countDownFontColor]">{{HH}} : {{MM}} : {{SS}}</p>
          </view>
        </view>
        <view
          class="template-day"
          :style="{ justifyContent: propsData.params.justifyContent }"
          v-if="propsData.params.styleType == 3"
        >
          <view class="template-box">
            <h4 :style="[propsData.params.css]">{{$t('diy.start')}}:</h4>
            <p class="time-box">
              <span :style="[templateDaySet]">{{DD}}</span>
              {{$t('diy.day')}}
              <span :style="[templateDaySet]">{{HH}}</span>
              {{$t('diy.hour')}}
              <span :style="[templateDaySet]">{{MM}}</span>
              {{$t('diy.minute')}}
              <span :style="[templateDaySet]">{{SS}}</span>
              {{$t('diy.second')}}
            </p>
          </view>
        </view>
        <view
          class="template-time"
          :style="{ justifyContent: propsData.params.justifyContent }"
          v-if="propsData.params.styleType == 4"
        >
          <view class="template-box">
            <h4 :style="[propsData.params.css]">{{$t('diy.start')}}:</h4>
            <p class="time-box" :style="[countDownFontColor]">{{HH}}: {{MM}}: {{SS}}</p>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { diyMixin } from "../mixins/diy";

export default {
  name: "countDown",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [diyMixin],
  data() {
    return {
      DD: "00",
      HH: "00",
      MM: "00",
      SS: "00",
    };
  },
  mounted() {
    if(this.propsData.params.startTime) {
        this.countDown()
    }
  },
  watch: {},
  computed: {
    countDownBgColor() {
      return { backgroundColor: this.propsData.params.countDownBgColor };
    },
    countDownFontColor() {
      return { color: this.propsData.params.countDownFontColor };
    },
    templateDaySet() {
      return {
        backgroundColor: this.propsData.params.countDownBgColor,
        color: this.propsData.params.countDownFontColor,
      };
    },
    contentStyle() {
        if(this.propsData.moduleCss.useBackground) {
            return this.propsData.moduleCss
        }
    }
  },
  methods: {
    // 根据时间获取倒计时
    countDown() {
      let startTime = new Date(this.propsData.params.startTime).getTime();
      let endTime = new Date(this.propsData.params.endTime).getTime();
      switch (uni.getSystemInfoSync().platform) {
        case "ios":
          startTime = new Date(
            this.propsData.params.startTime.replace(/-/g, "/")
          ).getTime();
          endTime = new Date(
            this.propsData.params.endTime.replace(/-/g, "/")
          ).getTime();
          break;
      }
      let now = new Date().getTime();
      if (startTime < now && now < endTime) {
        let timer = setInterval(() => {
          if (!this.GetRTime(endTime / 1000)) {
            clearInterval(timer);
            this.countDown();
          } else {
            this.time = this.GetRTime(endTime / 1000);
          }
        }, 1000);
      }
    },
    // 倒计时
    GetRTime(EndTime) {
      var EndTime = EndTime; //结束时间
      var NowTime = new Date(); //当前时间
      if (EndTime <= NowTime.getTime() / 1000) {
        return false;
      }
      //后台给我的是10位 精确到秒的  所有下面我就除以了1000，不要小数点后面的
      var t = EndTime - (NowTime.getTime() / 1000).toFixed(0);
      //如果后台给的是毫秒 上面不用除以1000  下面的计算时间也都要除以1000 这里我去掉1000了
      if(this.propsData.params.styleType == 3) {
          var d = Math.floor(t / 60 / 60 / 24); //天 var d=Math.floor(t/1000/60/60/24)
          var h = Math.floor((t / 60 / 60) % 24); //时 var h=Math.floor(t/1000/60/60%24)
          var m = Math.floor((t / 60) % 60); //分 var m=Math.floor(t/1000/60%60)
          var s = Math.floor(t % 60); //秒 var s=Math.floor(t/1000%60)
      } else {
          var d = 0
          var h = Math.floor((t / 60 / 60)); //时 var h=Math.floor(t/1000/60/60%24)
          var m = Math.floor((t / 60) % 60); //分 var m=Math.floor(t/1000/60%60)
          var s = Math.floor(t % 60); //秒 var s=Math.floor(t/1000%60)
      }
      if (parseInt(d) < 10) {
        d = "0" + d;
      }
      if (parseInt(h) < 10) {
        h = "0" + h;
      }
      if (parseInt(m) < 10) {
        m = "0" + m;
      }
      if (parseInt(s) < 10) {
        s = "0" + s;
      }
      this.DD = d
      this.HH = h
      this.MM = m
      this.SS = s
    },
  },
};
</script>

<style lang="scss" scoped>
.module-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
.market-countDown {
  width: 100%;
  // background-color: #ffffff;
  overflow: hidden;
  .countdown-img {
    width: 100%;
    height: 264rpx;
    background: #d9d9d9;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 100%;
      height: 100%;
    }
    .default-img {
      width: 146rpx;
      height: 112rpx;
      display: block;
    }
  }
  .countdown-content {
    width: 100%;
    height: 88rpx;
    // background-color: #ffffff;
    display: flex;
    align-items: center;
    .template-default {
      width: 100%;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
      h4 {
        font-size: 32rpx;
        font-family: PingFang SC;
        color: #000000;
        margin-bottom: 0;
        margin-right: 10rpx;
      }
      .countDown-box {
        display: flex;
        align-items: center;
        .time-box {
          margin-bottom: 0;
          width: 40rpx;
          height: 40rpx;
          background-color: #fa2c1b;
          border-radius: 6rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
        }
        .time-split {
          width: 24rpx;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 0;
          line-height: 40rpx;
          font-weight: bold;
        }
      }
    }
    .template-padding {
      height: 48rpx;
      background: #ffffff;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 24rpx;
      .template-box {
        height: 48rpx;
        border-radius: 60px;
        border: 1px solid #fa2c1b;
        padding-right: 20rpx;
        display: flex;
        align-items: center;
      }
      h4 {
        width: 136rpx;
        height: 48rpx;
        background: #fa2c1b;
        border-radius: 40rpx 0px 0px 40rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 0;
      }
      .time-box {
        padding-left: 20rpx;
        color: #fa2c1b;
        margin-bottom: 0;
      }
    }
    .template-day,
    .template-time {
      height: 48rpx;
    //   background: #ffffff;
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0 24rpx;
      .template-box {
        display: flex;
        align-items: center;
        h4 {
          font-size: 32rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #000000;
          margin-right: 10rpx;
          margin-bottom: 0;
        }
        .time-box {
          display: flex;
          align-items: center;
          margin-bottom: 0;
          p {
            margin-bottom: 0;
          }
          span {
            width: 40rpx;
            height: 40rpx;
            background: #fa2c1b;
            border-radius: 4rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
            margin: 0 8rpx;
          }
        }
      }
    }
    .template-time .template-box {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #fa2c1b;
      margin-bottom: 0;
    }
  }
}
</style>
